<script lang="tsx">
import { defineComponent, onMounted, reactive, ref, Transition, onUnmounted, onActivated, watch, h } from "vue";
import CardItem from "@/components/cardItem";
import backImg from '@img/back.png';
import { useRouter,useRoute } from "vue-router";
import request from '@/utils/api'
export default defineComponent({
    name: "fillList",
    components: {
        CardItem
    },
    setup(_, { }) {
        const router = useRouter();
        const route = useRoute();

        const card_1 = ref([]);

        const userPutAciveData = ref([])

        const initData = async () => {

            let resp = await request.get(`admin-api/mdm/event/get?id=${route.query.id}`);
            resp.data['notAction'] = true;
            card_1.value = [resp.data];
            userPutAciveData.value = resp.data.itemList
        }

        initData()

        const confirmClick = (idx) => {
            userPutAciveData.value.splice(idx, 1)
        }

        const formatTimestamp = (timestamp) => {
            // 创建一个 Date 对象
            const date = new Date(timestamp); // 时间戳是秒为单位，需乘以 1000
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需加 1
            const day = String(date.getDate()).padStart(2, "0"); // 日期保证两位
            const hours = String(date.getHours()).padStart(2, '0'); // 小时
            const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟
            const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
        

        // 返回渲染函数
        return () => (
            <>
                <div class='h-[64px] w-full p-[0_20px] flex items-center justify-between border-b-(1px solid #e5e5e5)'>
                    <div class='flex items-center cursor-pointer' onClick={() => router.back()}>
                        <img src={backImg} class='w-[36px] h-[36px] mr-[5px]' />
                        <h3 class='text-(18px #000)'>{card_1.value[0]?.title}</h3>
                    </div>
                    {/* <div class='p-[4px_10px] text-(16px #FFF) bg-[#2A82E4] rounded-[10px] cursor-pointer' onClick={() => router.push(`/fillInCreate?eventId=${card_1.value[0].id}`)}>创建新提交</div> */}
                </div>

                <div class='w-[960px] m-auto mt-[36px]'>
                    <h2 class='text-(20px #000) mb-[20px] self-start'>活动信息</h2>
                    {
                        card_1.value.map(r => <CardItem currentItem={r} ></CardItem>)
                    }
                </div>


                <div class='w-[960px] m-auto mt-[36px]'>
                    <h2 class='text-(20px #000) mb-[20px] self-start'>我的提交（{userPutAciveData.value.length}个）</h2>
                    <ul class='border-(1px solid #E5E5E5) rounded-[10px] p-[10px_20px]' v-show={userPutAciveData.value.length}>
                        {
                            userPutAciveData.value.map((r, index) => (
                                <li class='flex justify-between items-center h-60px'>

                                    <div class='flex items-center'>
                                        <h3 class='text-(16px #000) mr-[20px]'>{r.title}</h3>
                                        <span class='text-(14px #888)'>{formatTimestamp(r.createTime)}</span>
                                    </div>

                                    <div class='flex items-center gap-10px'>
                                        <div class='w-[60px] flex items-center justify-center border-(1px solid #ddd) bg-#fff rounded-10px text-(14px #000) p-[4px_10px] cursor-pointer' onClick={() => router.push(`/fillInCreate?eventId=${r.eventId}&id=${r.id}&item=${JSON.stringify(r)}`)}>编辑</div>


                                        {/* <el-popconfirm title="确定删除吗？" confirm-button-text='确定' cancel-button-text='取消' onConfirm={() => confirmClick(index)}>
                                            {{
                                                reference: () => (
                                                    <div class='w-[60px] flex items-center justify-center border-(1px solid #ddd) bg-#fff rounded-10px text-(14px red) p-[4px_10px] cursor-pointer' >删除</div>

                                                )
                                            }}

                                        </el-popconfirm> */}

                                    </div>

                                </li>
                            ))
                        }
                    </ul>
                </div>

            </>
        )
    }
})

</script>